<template>
  <a-modal v-model:visible="modalVisible" title="添加用户" centered @ok="onClickRegistered" okText='注册' cancelText='取消' :ok-button-props="formInline.user!==''&&formInline.password!==''?{ disabled: false }:{ disabled: true }" @change="onChangeAddUser">
    <div class="d-modal">
      <a-form layout="inline" :model="formInline">
        <div>
          <a-form-item>
            <a-input v-model:value="formInline.name" placeholder="用户名">
              <template #prefix>
                <UserOutlined style="color:rgba(0,0,0,.25)" />
              </template>
            </a-input>
          </a-form-item>
        </div>
        <div>
          <a-form-item>
            <a-input v-model:value="formInline.password" type="password" placeholder="密码" autocomplete>
              <template #prefix>
                <LockOutlined style="color:rgba(0,0,0,.25)" />
              </template>
            </a-input>
          </a-form-item>
        </div>
        <div class="d-radio">
          <a-radio-group v-model:value="value">
            <a-radio :value="Role.超级管理员" v-if="username==='admin'">
              超级管理员
            </a-radio>
            <a-radio :value="Role.高级用户">
              高级用户
            </a-radio>
            <a-radio :value="Role.普通用户">
              普通用户
            </a-radio>
          </a-radio-group>
        </div>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang='ts'>
import { reactive, SetupContext, toRefs } from "vue";
import { register, Role } from "@/api/userApi";
import { $message } from "../AntDesign/message";
import { LockOutlined, UserOutlined } from "@/components/AntDesign/icons/icons";
export default {
  name: " ",
  props: {
    modalVisible: Boolean,
  },
  emits: ["onCanceladduser"],
  components: {
    LockOutlined,
    UserOutlined,
  },
  setup(props: any, ctx: SetupContext) {
    const data = reactive({
      formInline: {
        name: "",
        password: "",
      },
      username: JSON.parse(localStorage.getItem("userdata") as string).name,
      value: Role.普通用户,
    });

    /* 注册 */
    async function onClickRegistered() {
      try {
        const result = await register({
          ...data.formInline,
          rolename: data.value,
        });
        ctx.emit("onCanceladduser", 1);
        data.formInline.name = "";
        data.formInline.password = "";
        data.value = Role.普通用户;
        $message("success", result.data.message);
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    function onChangeAddUser() {
      ctx.emit("onCanceladduser", 2);
    }

    return {
      ...toRefs(data),
      Role,
      onClickRegistered,
      onChangeAddUser,
    };
  },
};
</script>
<style lang="less" scoped>
.d-modal {
  text-align: center;
  .ant-input {
    height: 40px !important;
    border-radius: 4px;
  }
  .d-radio {
    margin-top: 15px;
  }
}

</style>